<template>
  <div class="member">
    <div class="member-head">
      <div class="title">
        {{text}}
      </div>
      <div class="btns">
        <slot name="btns"></slot>
      </div>
    </div>
    <div class="member-content">
      <slot name="content">
        <div class="not-data">暂无数据</div>
      </slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/runtime-core';

export default defineComponent({
  props: {
    text: {
      type: String,
      default: '储蓄卡'
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@style/extend';
.member {
  width: 45%;
  // border: 1px solid #ccc;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 10px #e9e9e9;
  .member-head {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: $a2-Color;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    .title {
      padding-left: 20px;
      @extend .standard-4
    }
    .btns {
      text-align: right;
      padding-right: 20px;
    }
  }
  .member-content {
    padding: 10px 20px 10px 20px;
    background: white;
    .not-data {
      text-align: center;
      padding-top: 10px;
      color: #ccc;
      height: 90px;
    }
  }
}
</style>